<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04.虚拟元素创建-JSX</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactDOM核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <div class="box"></div>
    <!--5、设置script标签的类型为text/babel-->
    <script type="text/babel">
        //script标签中默认的语言类型为JS:type="text/javascript"

        //6、获取容器元素
        const root = ReactDOM.createRoot(document.getElementById('root'));
        const box = ReactDOM.createRoot(document.querySelector('.box'));
        //7、渲染(是将虚拟DOM转化成真实DOM)
        // root.render(<div>尚硅谷</div>);
        //稍微复杂一点结构
        //在后期写组件的时候，如果想要换行书写，需要添加一个()包裹起来作为一个整体，但是目前来说()可加可不加
        // root.render(
        //     (
        //         <div>
        //             <p>
        //                 <a href="http://www.atguigu.com">尚硅谷</a>
        //             </p>
        //         </div>
        //     )
        // );

        //声明一个虚拟DOM结构
        //注意：在JSX中所有的标签都必须要闭合
        //双标签：<标签名></标签名>; <标签名/>  常见的单标签：img、br、input、hr、meta
        /* const vDOM = <div>
            <p>
                <a href="http://www.atguigu.com">尚硅谷</a>
                <br />
                <span>百度</span>
            </p>
        </div>
        root.render(vDOM);
        box.render(vDOM); */

        //如果想要将jsx结构直接挂载到容器元素上
        //在React对象身上有一个Fragment根标签容器
        const { Fragment } = React;
        const vDOM = <Fragment>
            <p>
                <a href="http://www.atguigu.com">尚硅谷</a>
                <br />
                <span>百度</span>
            </p>
        </Fragment>
        root.render(vDOM);
    </script>
</body>

</html>